<!--
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2024-05-06 08:47:12
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2024-05-12 00:02:39
 * @FilePath: /gptfront-dev/src/components/ChatDetailModal.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script>
export default {
    options: {
        styleIsolation: 'shared',
    },
}
</script>

<script setup>
import {  ref, computed } from 'vue'

import { onLoad } from '@dcloudio/uni-app'
import { getInstruction } from '@/api/instruction'
import useLocale from '@/composables/useLocale'
import useAIModelStore from '@/store/modules/AIModel'

const AIModelStore = useAIModelStore()
const AIModel  = computed(() => AIModelStore.AIModel)


const { t } = useLocale()


const instructionDetail = ref(null)
onLoad(async () => {
    const resp = await getInstruction()
    if (resp.status === 200 && resp.data) {
        if (resp.data.status === 0) {
            instructionDetail.value = resp.data
        }
    }
})
</script>

<template>
    <view class="px-4 py-10 text-base text-zinc-900">
        <view class="flex flex-col items-center justify-center">
            <view class="mb-2 size-16 rounded-full bg-zinc-950"></view>
            <view class="text-lg text-zinc-900">ChatAI Plus</view>
        </view>
        <view>
            <view class="py-6 text-sm font-medium">
                {{ t('customInstructions') }}
            </view>
            <view class="select-text font-bold">
                {{ t('instructionContext') }}
            </view>
            <view class="py-4">{{ instructionDetail?.question }}</view>
            <view class="select-text font-bold">
                {{ t('instructionResponse') }}
            </view>
            <view class="py-4">{{ instructionDetail?.chatgptAnswer }}</view>
        </view>
        <view>
            <view class="py-4 text-sm font-medium">{{ t('modelInfo') }}</view>
            <view class="mb-1">
                {{ AIModel?.name }}
            </view>
            <view class="select-text text-sm text-zinc-500">
                {{ AIModel?.desc }}
            </view>
        </view>
    </view>
</template>

<style scoped>
/*  #ifdef MP-WEIXIN  */
::v-deep .uni-popup__wrapper {
    width: 100%;
    height: 100%;
}
/* #endif */

/*  #ifdef WEB */
::v-deep .uni-popup__wrapper {
    max-width: 90vw;
}
/* #endif */
</style>
